<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>饰品市场</title>
</head>

<style type="text/css">
    * {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    a {
        text-decoration: none;
    }

    body {
        background-image: url(/static/image/header-bg_csgo.jpg);
        background-repeat: no-repeat;
    }

    .top {
        width: 100%;
        height: 71px;
    }

    .market_list {
        height: 180vh;
        width: 100%;
        margin: 0 auto;
    }

    .market-head {
        width: 74vw;
        height: 24vh;
        margin: 5vh 0 0 160px;
        background-image: url("/static/image/marcket-header-bg.png");
        background-repeat: no-repeat;
    }

    .market-type {
        height: 16vh;
        width: 65vw;
        margin: 0 auto;
        border-bottom: 1px solid #2C2F38;
    }

    .item-type {
        width: 76px;
        height: 80px;
        float: left;
        margin: 30px 0 0 25px;
        text-align: center;
        color: gray;
        line-height: 30px;
        font-size: 12px;
    }

    .item-type:hover {
        background: #2D2F3E;
        cursor: pointer;
    }

    .typeIcon {
        width: 32px;
        height: 32px;
        margin: 8px auto 5px;
        background-image: url("/static/image/icon_csgo.less.png");
    }

    .icon_dagger {
        background-position-x: -32px;
    }

    .icon_pistol {
        background-position-y: -64px;
    }

    .icon_rifle {
        background-position-x: -64px;
    }

    .icon_submachine {
        background-position-x: -32px;
        background-position-y: -64px;
    }

    .icon_shotgun {
        background-position-x: -64px;
        background-position-y: -32px;
    }

    .icon_machine {
        background-position-y: -32px;
    }

    .icon_glove {
        background-position-x: -100px;
    }

    .icon_spy {
        background-position-y: -100px;
    }

    .icon_other {
        background-position-y: -32px;
        background-position-x: -32px;
    }

    .criteria {
        width: 52vw;
        height: 7vh;
        margin-left: 70px;
        float: left;
    }

    .select_mulit {
        width: 76px;
        height: 32px;
        background: #2D2F3E;
        margin: 10px 0 0 25px;
        float: left;
        color: #9a9b9e;
        font-size: 12px;
        line-height: 32px;
    }

    .select_mulit span {
        margin-left: 6px;
    }

    .select_mulit:hover {
        background: #474a62;
        cursor: pointer;
    }

    .search {
        width: 16vw;
        height: 7vh;
        float: left;
    }

    .searshInput input {
        padding: 7px;
        outline: none;
        float: left;
        margin-top: 10px;
    }

    .searchContext {
        width: 160px;
        background: rgba(72, 134, 255, .16);
        border: 1px solid #3F5D97;
        color: white;
        font-size: 12px;
    }

    .searchContext:focus {
        border: 1px solid #4d73b9;
    }

    .searchBtn {
        height: 30px;
        width: 70px;
        border: none;
        background: #3F5D97;
        font-size: 13px;
        color: white;
    }

    .searchBtn:hover {
        background: #4e75bc;
        cursor: pointer;
    }

    .typeList {
        width: 177px;
        background: #2D2F3E;
        display: none;
        clear: both;
        overflow: hidden;
        position: absolute;
        box-sizing: border-box;
    }

    .typeList li {
        width: 76px;
        height: 30px;
        float: left;
        background: #3d3f50;
        margin: 3px 6px;
    }

    .typeList li:last-child {
        margin-bottom: 10px;
    }

    .typeList li:hover {
        background: #474a62;
        color: white;
    }

    .market_deal {
        width: 74vw;
        border: 1px solid #394965;
        margin: 5vh 0 0 160px;
        height: 149vh;
        background: white;
    }

    .deal_type {
        width: 100%;
        height: 50px;
        text-align: center;
        color: #9a9b9e;
        font-size: 14px;
        line-height: 50px;
        background: #1c202b;
        float: left;
    }

    .buyType, .sellType, .hotType {
        width: 9vw;
        height: 50px;
        float: left;
        border-right: 1px solid #6f6e6e;
    }

    .buyType:hover, .sellType:hover, .hotType:hover {
        background: linear-gradient(to right, rgba(27, 32, 41, 1.0) 10%, rgba(62, 96, 153, 1.0) 50%, rgba(27, 32, 41, 1.0) 100%);
        color: whitesmoke;
        cursor: pointer;
    }

    .sellTypeDefuult {
        background: linear-gradient(to right, rgba(27, 32, 41, 1.0) 10%, rgba(62, 96, 153, 1.0) 50%, rgba(27, 32, 41, 1.0) 100%);
        color: white;
        font-weight: bold;
    }

    .onType {
        background: linear-gradient(to right, rgba(27, 32, 41, 1.0) 10%, rgba(62, 96, 153, 1.0) 50%, rgba(27, 32, 41, 1.0) 100%);
        color: white;
        font-weight: bold;
    }

    .priceFilter {
        height: 50px;
        width: 18vw;
        margin-left: 17vw;
        float: left;
    }

    .priceFilter input {
        padding: 7px;
        width: 70px;
        background-color: #00000000;
        border: 1px solid gray;
        text-align: center;
        font-size: 11px;
        color: white;
    }

    .minPrice, .maxPrice {
        display: inline;
    }

    .priceFilterBtn {
        display: inline-flex;
        height: 30px;
        width: 60px;
        background: #3F5D97;
        color: white;
        line-height: 30px;
        margin-left: 6px;
    }

    .priceFilterBtn font {
        margin: 0 auto;
        font-size: 9px;
    }

    .priceSort {
        width: 100px;
        height: auto;
        margin-left: 65vw;
        margin-top: 7px;
        line-height: 35px;
        text-align: left;
        font-size: 12px;
    }

    .sort {
        width: 100px;
        height: 35px;
        background-color: #2D2F3E;
    }

    .sort:hover {
        cursor: pointer;
        background: #474a62;
        color: white;
    }

    .sortList {
        width: 100px;
        height: auto;
        display: none;
    }

    .sortList li {
        width: 100px;
        height: 35px;
        background-color: #2D2F3E;
    }

    .sortList li:hover {
        cursor: pointer;
        background: #474a62;
        color: white;
    }


    .deal_goods {
        width: 200px;
        height: 220px;
        border: 1px solid #d6d6d6;
        float: left;
        margin: 25px 0 0 20px;
    }


    .deal_goods > .goods-img {
        text-align: center;
        width: 200px;
        height: 140px;
        background-image: url(/static/image/item_bg.png);
        position: relative;
        left: 0;
        top: 0;
    }

    .deal_goods > .goods-info {
        width: 200px;
        height: 80px;
        transition: 0.3s;
        background-color: #f9f9f9;
    }

    .goods-info h3 {
        width: 190px;
        font-weight: 400;
        font-size: 15px;
        overflow: hidden;
        padding: 10px 0 20px 5px;
    }

    .goods-info a {
        color: #333;
    }

    .goods-info span {
        color: orange;
        font-size: 15px;
        padding-left: 5px;
        font-weight: bold;
    }

    .goods-info b {
        margin-left: 50px;
        color: #959595 !important;
        font-size: 13px;
        font-weight: 500;
    }

    .goodsTitle {
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .goodsTitle:hover {
        text-overflow: inherit;
        overflow: visible;
    }

    .goods-info a:hover {
        color: orange;
    }

    .abrasionTag{
        width: 60px;
        height: auto;
        background-color: green;
        font-size: 13px;
        color: white;
        position: absolute;
        left: 0;
        top: 0;
    }
    .paging {
        height: auto;
        width: 100%;
        line-height: 36px;
        float: left;
        margin: 40px 0 20px 0;
        padding:0 350px;
    }

    .previousPage {
        height: 36px;
        width: 69px;
        border: 1px solid silver;
        text-align: center;
        float: left;
        background: #F4F4F5;
        color: #909198;
        border-radius: 2px;
    }

    .pageNum {
        height: 36px;
        border: 0px solid silver;
        display: flex;
        float: left;
        text-align: center;
    }
    .pageNum div {
        width: 40px;
        height: 35px;
        border: 1px solid silver;
        border-radius: 2px;
        color: #45536C;
    }
    .nextPage {
        height: 36px;
        width: 69px;
        border: 1px solid silver;
        text-align: center;
        float: left;
        border-radius: 2px;
    }

</style>

<link rel="stylesheet" href="/static/css/font/iconfont.css"/>
<link rel="stylesheet" href="/static/css/userpage.css">
<link rel="stylesheet" href="/static/css/floatbar.css">
<link rel="stylesheet" href="/static/css/font.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.css"/>
<script src="/static/js/store.js"></script>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function () {


        var daggerItem = $("#daggerItem");
        var pistolItem = $("#pistolItem");
        var rifleItem = $("#rifleItem");
        var submachineItem = $("#submachineItem");
        var shotgunItem = $("#shotgunItem");
        var machineItem = $("#machineItem");
        var gloveItem = $("#gloveItem");
        var printingItem = $("#printingItem");
        var spyItem = $("#spyItem");
        var otherItem = $("#otherItem");


        daggerItem.mouseover(function () {
            // var type = daggerItem.children("span").attr("value");
            // var type = daggerItem.children("span").html();
            daggerItem.children("ul").css('display', 'block');
        })
        daggerItem.mouseout(function () {
            $("#daggerItem").children("ul").css('display', 'none');
        })

        pistolItem.mouseover(function () {
            var type = pistolItem.children("span").html();
            pistolItem.children("ul").css('display', 'block');
        })
        pistolItem.mouseout(function () {
            pistolItem.children("ul").css('display', 'none');
        })

        rifleItem.mouseover(function () {
            var type = rifleItem.children("span").html();
            rifleItem.children("ul").css('display', 'block');
        })
        rifleItem.mouseout(function () {
            rifleItem.children("ul").css('display', 'none');
        })

        submachineItem.mouseover(function () {
            var type = submachineItem.children("span").html();
            submachineItem.children("ul").css('display', 'block');
        })
        submachineItem.mouseout(function () {
            submachineItem.children("ul").css('display', 'none');
        })

        shotgunItem.mouseover(function () {
            var type = shotgunItem.children("span").html();
            shotgunItem.children("ul").css('display', 'block');
        })
        shotgunItem.mouseout(function () {
            shotgunItem.children("ul").css('display', 'none');
        })

        machineItem.mouseover(function () {
            var type = machineItem.children("span").html();
            machineItem.children("ul").css('display', 'block');
        })
        machineItem.mouseout(function () {
            machineItem.children("ul").css('display', 'none');
        })

        gloveItem.mouseover(function () {
            var type = gloveItem.children("span").html();
            gloveItem.children("ul").css('display', 'block');
        })
        gloveItem.mouseout(function () {
            gloveItem.children("ul").css('display', 'none');
        })

        printingItem.mouseover(function () {
            var type = printingItem.children("span").html();
            printingItem.children("ul").css('display', 'block');
        })
        printingItem.mouseout(function () {
            printingItem.children("ul").css('display', 'none');
        })

        spyItem.mouseover(function () {
            var type = spyItem.children("span").html();
            spyItem.children("ul").css('display', 'block');
        })
        spyItem.mouseout(function () {
            spyItem.children("ul").css('display', 'none');
        })

        otherItem.mouseover(function () {
            var type = otherItem.children("span").html();
            otherItem.children("ul").css('display', 'block');
        })
        otherItem.mouseout(function () {
            otherItem.children("ul").css('display', 'none');
        })


        $("#sort").click(function () {
            $("#sortList").css('display', 'block');
        })
        $("#priceSort").mouseout(function () {
            $("#sortList").css('display', 'none');
        })

        /*出售 求购 js*/
        $("#buyType").click(function () {
            $("#buyType").addClass("onType");
            $("#sellType").removeClass("onType");
            $("#hotType").removeClass("onType");
            $("#sellType").removeClass("sellTypeDefuult");
        })
        $("#sellType").click(function () {
            $("#sellType").addClass("onType");
            $("#buyType").removeClass("onType");
            $("#hotType").removeClass("onType");

        })
        $("#hotType").click(function () {
            $("#hotType").addClass("onType");
            $("#buyType").removeClass("onType");
            $("#sellType").removeClass("onType");
            $("#sellType").removeClass("sellTypeDefuult");
        })


        /*鼠标悬浮到交易物品上虚化背景颜色*/
        $("#dealGoods").mousemove(function () {
            $(".goods-info").css("backgroundColor", "#fefcf7")
        })
        $("#dealGoods").mouseout(function () {
            $(".goods-info").css("backgroundColor", "#f9f9f9")
        })

    });


</script>

<body>

<div class="bigBox">


    <div class="top">
        <iframe src="${pageContext.request.contextPath }/goods/head" scrolling="no"
                width="100%" height="71px" frameborder="0" name="market" id="userTop"></iframe>
    </div>

    <div class="market_list">

        <div class="market-head">
            <div class="market-type">
                <div class="item-type" style="margin-left: 0" id="daggerItem">
                    <div class="typeIcon icon_dagger"></div>
                    <span class="type" id="dagger" value="dagger">匕首</span>
                    <ul class="typeList">
                        <c:forEach items="${sessionScope.marketTypeList}" var="t">
                            <c:if test="${t.typeName eq '匕首'}">
                                <li>${t.name}</li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
                <div class="item-type" id="pistolItem">
                    <div class="typeIcon icon_pistol"></div>
                    <span class="type" id="pistol" value="pistol">手枪</span>
                    <ul class="typeList">
                        <c:forEach items="${sessionScope.marketTypeList}" var="t">
                            <c:if test="${t.typeName eq '手枪'}">
                                <li>${t.name}</li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
                <div class="item-type" id="rifleItem">
                    <div class="typeIcon icon_rifle"></div>
                    <span class="type" id="rifle" value="rifle">步枪</span>
                    <ul class="typeList">
                        <c:forEach items="${sessionScope.marketTypeList}" var="t">
                            <c:if test="${t.typeName eq '步枪'}">
                                <li>${t.name}</li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
                <div class="item-type" id="submachineItem">
                    <div class="typeIcon icon_submachine"></div>
                    <span class="type" id="submachine" value="submachine">微型冲锋枪</span>
                    <ul class="typeList">
                        <c:forEach items="${sessionScope.marketTypeList}" var="t">
                            <c:if test="${t.typeName eq '微型冲锋枪'}">
                                <li>${t.name}</li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
                <div class="item-type" id="shotgunItem">
                    <div class="typeIcon icon_shotgun"></div>
                    <span class="type" id="shotgun" value="shotgun">霰弹枪</span>
                    <ul class="typeList">
                        <c:forEach items="${sessionScope.marketTypeList}" var="t">
                            <c:if test="${t.typeName eq '霰弹枪'}">
                                <li>${t.name}</li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
                <div class="item-type" id="machineItem">
                    <div class="typeIcon icon_machine"></div>
                    <span class="type" id="machine" value="machine">机枪</span>
                    <ul class="typeList">
                        <c:forEach items="${sessionScope.marketTypeList}" var="t">
                            <c:if test="${t.typeName eq '机枪'}">
                                <li>${t.name}</li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
                <div class="item-type" id="gloveItem">
                    <div class="typeIcon icon_glove"></div>
                    <span class="type" id="glove" value="glove">手套</span>
                    <ul class="typeList">
                        <c:forEach items="${sessionScope.marketTypeList}" var="t">
                            <c:if test="${t.typeName eq '手套'}">
                                <li>${t.name}</li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
                <div class="item-type" id="printingItem">
                    <div class="typeIcon icon_printing"></div>
                    <span class="type" id="printing" value="printing">印花</span>
                    <ul class="typeList">
                        <c:forEach items="${sessionScope.marketTypeList}" var="t">
                            <c:if test="${t.typeName eq '印花'}">
                                <li>${t.name}</li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
                <div class="item-type" id="spyItem">
                    <div class="typeIcon icon_spy"></div>
                    <span class="type" id="spy" value="spy">探员</span>
                    <c:forEach items="${sessionScope.marketTypeList}" var="t">
                        <c:if test="${t.typeName eq '探员'}">
                            <li>${t.name}</li>
                        </c:if>
                    </c:forEach>
                    <ul class="typeList">
                    </ul>
                </div>
                <div class="item-type" id="otherItem">
                    <div class="typeIcon icon_other"></div>
                    <span class="type" id="other" value="other">其他</span>
                    <ul class="typeList">
                        <c:forEach items="${sessionScope.marketTypeList}" var="t">
                            <c:if test="${t.typeName eq '其他'}">
                                <li>${t.name}</li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>


            </div>
            <div class="criteria">
                <div class="select_mulit" style="margin-left: 0">
                    <span>品质</span>
                    <div class="qualityList">

                    </div>
                </div>
                <div class="select_mulit">
                    <span>类别</span>
                </div>
                <div class="select_mulit">
                    <span>外观</span>
                </div>
                <div class="select_mulit">
                    <span>收藏品</span>
                    <div class=""></div>
                </div>
            </div>
            <div class="search">
                <div class="searshInput">
                    <form>
                        <input type="text" class="searchContext" placeholder="输入物品名称">
                        <input type="submit" value="搜索" class="searchBtn">
                    </form>
                </div>
            </div>
        </div>

        <div class="market_deal">
            <div class="deal_type">
                <div class="sellType sellTypeDefuult" id="sellType">
                    <span>出售</span>
                </div>
                <div class="buyType" id="buyType">
                    <span>求购</span>
                </div>
                <div class="hotType" id="hotType">
                    <span>热门关注</span>
                </div>
                <div class="priceFilter">
                    <div class="minPrice">
                        ￥<input type="text" placeholder="最低价">
                    </div>
                    <div class="maxPrice">
                        -￥<input type="text" placeholder="最高价">
                    </div>
                    <div class="priceFilterBtn">
                        <font>确认</font>
                    </div>
                </div>
                <div class="priceSort" id="priceSort">
                    <div class="sort" id="sort">
                        <font>&nbsp;排序</font>
                    </div>
                    <ul class="sortList" id="sortList">
                        <li>&nbsp;默认</li>
                        <li>&nbsp;价格 &#8593;</li>
                        <li>&nbsp;价格 &#x2193;</li>
                    </ul>

                </div>
            </div>
            <%--交易物品列表集合 --%>
            <div class="market_goods">
                <div class="deal_goods_list">


                    <c:forEach items="${requestScope.dealPageInfo.list}" var="deal">
                        <div class="deal_goods" id="dealGoods">

                            <div class="goods-img">
                                <c:if test="${deal.ep.appearance eq '崭新出厂'}">
                                    <div class="abrasionTag" style="background-color: green">崭新出厂</div>
                                </c:if>
                                <c:if test="${deal.ep.appearance eq '略有磨损'}">
                                    <div class="abrasionTag" style="background-color: #488B48">略有磨损</div>
                                </c:if>
                                <c:if test="${deal.ep.appearance eq '久经沙场'}">
                                    <div class="abrasionTag" style="background-color: #F1AD4D">久经沙场</div>
                                </c:if>
                                <c:if test="${deal.ep.appearance eq '战痕累累'}">
                                    <div class="abrasionTag" style="background-color: #993A38">战痕累累</div>
                                </c:if>
                                <c:if test="${deal.ep.appearance eq '破损不堪'}">
                                    <div class="abrasionTag" style="background-color: #B7625F">破损不堪</div>
                                </c:if>
                                <a href="/goods/goodsInfo/${deal.ep.id}">
                                    <img src="${deal.ep.goods.converPath}" width="147px" height="147px"/>
                                </a>
                            </div>
                            <div class="goods-info">
                                <a href="/goods/goodsInfo/${deal.ep.id}">
                                    <h3 class="goodsTitle">
                                        ${deal.ep.goods.goodsType.name} | ${deal.ep.goods.coating}(${deal.ep.appearance})
                                    </h3>
                                </a>
                                <span>￥ ${deal.price}</span>
                                <b>10+件在售</b>
                            </div>
                        </div>
                    </c:forEach>

                    <div class="paging">
                        <div class="previousPage indexPage">
                            <a href="/goods/market?dealType=1&pageNum=1">
                                首页
                            </a>
                        </div>
                        <div class="previousPage">
                            <a href="/goods/market?dealType=1&pageNum=${requestScope.dealPageInfo.pageNum - 1}">
                                上一页
                            </a>
                        </div>
                        <div id="pageNum" class="pageNum">
                            <div class="mydiv" style="background-color: #41a8ff">
                                <a href="javascript:;">
                                    ${requestScope.dealPageInfo.pageNum}
                                </a>
                            </div>
                            <div class="nextPage previousPage">
                                <a href="javascript:;">
                                    ...
                                </a>
                            </div>
                            <div class="nextPage previousPage">
                                <a href="/goods/market?dealType=1&pageNum=${requestScope.dealPageInfo.pages}">
                                    ${requestScope.dealPageInfo.pages}
                                </a>
                            </div>
                        </div>
                        <div class="nextPage previousPage">
                            <a href="/goods/market?dealType=1&pageNum=${requestScope.dealPageInfo.pageNum + 1}">
                                下一页
                            </a>
                        </div>
                        <div class="previousPage tailPage">
                            <a href="/goods/market?dealType=1&pageNum=${requestScope.dealPageInfo.pages}">
                                尾页
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <%--右侧悬浮框--%>
    <div class="floatbar">
        <a href="">
            <div class="Icontext"><span class="iconfont icon-shouji"></span><br/>
                <font size="1">App</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-xingxing"></span><br/>
                <font size="1" color="#95959">收藏</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-weixin"></span><br/>
                <font size="1" color="#95959">公众号</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-weibo"></span><br/>
                <font size="1" color="#95959">微博</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-wenhao"></span><br/>
                <font size="1" color="#95959">帮助</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-duanxin"></span><br/>
                <font size="1" color="#95959">客服</font>
            </div>
        </a>
        <a href="javascript:scroll(0,0);">
            <div class="backTop"><span class="iconfont icon-sanjiaoxing_shang"></span><br/>
                <font size="2" color="#95959">TOP</font>
            </div>
        </a>
    </div>

    <%-- 用户信息悬浮框 --%>
    <div class="store" id="store">
        <div class="store-info">
            <div class="store-user">
                <div class="store-user-img">
                    <c:if test="${empty sessionScope.userNow.headPath}">
                        <img src="../static/image/defaultHead.png" width="52px" height="52px"/>
                    </c:if>
                    <c:if test="${not empty sessionScope.userNow.headPath}">
                        <img src="${sessionScope.userNow.headPath}" width="52px" height="52px"/>
                    </c:if>
                </div>
                <div class="store-user-name">
                    <c:if test="${not empty sessionScope.userNow.username}">
                        <h4>${sessionScope.userNow.username}</h4>
                    </c:if>
                    <c:if test="${empty sessionScope.userNow.username}">
                        <h4>${sessionScope.userNow.tellphone}</h4>
                    </c:if>
                    <p><a href="/user/logout">注销</a></p>
                </div>
            </div>
            <div class="store-account">
                <div class="balance">余额
                    <span>${sessionScope.userNow.balance}</span>
                </div>
                <div class="topUp">
                    <a href="${pageContext.request.contextPath }/user/center">充值</a>
                </div>
            </div>
        </div>
    </div>

    <div class="tail">
        <iframe src="${pageContext.request.contextPath }/goods/tail" scrolling="no" width="100%" height="324px"
                frameborder="0"></iframe>
    </div>
</div>


</body>
</html>
